
<style>
    .xxpayPopupDiv .layui-form-label {
        width:120px !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 80% !important;
    }
    .xxpayPopupDiv .layui-input , .layui-textarea{
        width: 80%;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <form class="layui-form center">
                    <div class="layui-form-item">
                        <label class="layui-form-label">接口类型</label>
                        <div class="layui-input-inline">
                            <input type="text" id="ifTypeInfo" autocomplete="off" class="layui-input" readonly>
                            <input type="hidden" id="ifTypeCode" name='ifTypeCode' >
                            <input type="hidden" id="id" name='id' >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">模板名称</label>
                        <div class="layui-input-inline">
                        	<input type="text" name="templateName" id="templateName" placeholder="请输入模板名称" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">模板状态</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="status" title="开启" value="1" checked />
                            <input type="radio" name="status" title="关闭" value="0" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-inline">
                            <input type="text" name="remark" id="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">渠道商户ID</label>
                        <div class="layui-input-inline">
                            <input name="passageMchIdTemplate" id='passageMchIdTemplate' placeholder="请输入渠道商户ID" required lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <fieldset class="layui-elem-field layui-hide" id='tempFieldSet'>
                    	<legend><button class='layui-btn layui-btn-xs layui-btn-danger'>账户配置模板</button></legend>
                        <div id="paramInfo"></div>
                 	</fieldset>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="update">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form','table','util','admin', 'upload'],function(){
        var form = layui.form
        , $ = layui.$
        , admin = layui.admin
        , layer = layui.layer
        , element = layui.element
        , view = layui.view
        , table = layui.table
            ,upload = layui.upload
            ,setter = layui.setter;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息
        var tid = view.getOpenParams('tid');
        var ifTypeCode = view.getOpenParams('ifTypeCode');
        $("#id").val(tid);
        $("#ifTypeCode").val(ifTypeCode);

        $('#btnBack_Param').on('click', function() {
            location.hash = '/config/pay_interface_type/template//ifTypeCode=' + ifTypeCode;
        });

        form.render();


        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/pay_interface_type/template/get',
            data: {id : tid},
            error: function(err){layer.alert(err);},
            success: function(res){

            	var templateIfTypeCode = res.data.ifTypeCode;

            	$("#templateName").val(res.data.templateName);
            	$("input[name='status'][value='"+res.data.status+"']").prop('checked', true);
            	$("#remark").val(res.data.remark);
            	$("#passageMchIdTemplate").val(res.data.passageMchIdTemplate);

            	var paramValJson = {};
            	try{paramValJson = JSON.parse(res.data.paramTemplate);}catch(err){}

            	admin.req({
                    type: 'post',
                    url: layui.setter.baseUrl + '/config/pay_interface_type/get',
                    data: {ifTypeCode : templateIfTypeCode},
                    error: function(err){ layer.alert(err); },
                    success: function(res){

                       	$('#ifTypeInfo').val(res.data.ifTypeName + "[ " + res.data.ifTypeCode + " ]");

                        if(!res.data.param){
    						return false;
                        }

                        var jsonObj = "";
                       	try{jsonObj = JSON.parse(res.data.param);}catch(err){}

                        if(!jsonObj || (!(jsonObj instanceof Array)) ){
                    		return false;
                        }

                        var htm = '';
                        $.each(jsonObj, function(i, obj){

                        	var thisValue = paramValJson[obj.name] ? paramValJson[obj.name] : "";
                            htm += `
                                            <div class="layui-form-item">
                                                <label class="layui-form-label"> ` + obj.desc + ` [` + obj.name + `]` +`</label>
                                                <div class="layui-input-block"> `;

                            if(obj.type == 'text') {

                                // 脱敏 & 存在数据
                                if(obj.star == 1 && thisValue){
                                    htm += ` <input templateField="1" fieldname="` + obj.name + `"  type="text"  value="" placeholder="` + thisValue + `" autocomplete="off" class="layui-input"  >`;
                                }else{
                                    htm += ` <input templateField="1" fieldname="` + obj.name + `" type="text"  value="` + thisValue + `" placeholder="请输入` + obj.desc + `" autocomplete="off" class="layui-input"  >`;
                                }

                            }else if(obj.type == 'textarea') {

                                // 脱敏  & 存在数据
                                if(obj.star == 1 && thisValue){
                                    htm += ` <textarea templateField="1" fieldname="` + obj.name + `"  placeholder="` + thisValue + `" class="layui-textarea" ></textarea>`;
                                }else{
                                    htm += ` <textarea templateField="1" fieldname="` + obj.name + `"  placeholder="请输入` + obj.desc + `" class="layui-textarea" >` + thisValue + `</textarea>`;
                                }

                            }

                            else if(obj.type == 'radio') {

                                var optionArray =  obj.options.split(',');
                                for(var j = 0; j < optionArray.length; j++){

                                    let radioName = optionArray[j].split('|')[0];
                                    let radioVal = optionArray[j].split('|')[1];

                                    var radioCheckedHtml = radioVal == thisValue ? "checked" :"";
                                    htm += ` <input `+radioCheckedHtml+` templateField="2" fieldname="` + obj.name + `" type="radio" name="` + obj.name + `" lay-verify="` + obj.verify + `" value="` + radioVal + `" title="`+radioName+`">`;
                                }
                            }else if(obj.type == 'file') {

                                var fileName = thisValue;
                                htm += `<input type="text" templateField="1" fieldname="` + obj.name + `" readonly style="width:320px; display: inline-block;" name="` + obj.name + `" lay-verify="` + obj.verify + `" value="` + fileName + `" placeholder="请上传` + obj.desc + `" autocomplete="off" class="layui-input">`;
                                var btnText = fileName ? "替换文件" : "上传文件";
                                htm += `<button class="uploadFileBtn layui-btn layui-btn-normal layui-btn-sm" type="button" style="margin-left: 20px;">`+btnText+`</button>`;
                                htm += `<span style="color:red; margin-left:20px" class="fileTip layui-hide">*点击[保存]按钮后文件生效</span>`;

                            }
                            htm += `   </div>
                                    </div> `;

                        });
                        htm += ``;
                        $('#paramInfo').html(htm);

                        //上传文件接口
                        var headers = {};
                        upload.render({
                            url: layui.setter.baseUrl + '/config/pay_passage_account/uploadParamFile?access_token=' + layui.data(setter.tableName)[setter.request.tokenName]
                            ,elem: '.uploadFileBtn'
                            ,headers: headers
                            ,accept: 'file'
                            ,done: function(res, index, upload){

                                if(res.code != 0){ //上传失败
                                    return layer.msg('上传失败');
                                }
                                layer.msg('上传成功！');
                                var uploadFileName = res.data;
                                var btnElem = $(this.item);
                                btnElem.prev().val(uploadFileName);
                                btnElem.parent().find('.fileTip').removeClass("layui-hide");
                            }
                        });

                        $('#tempFieldSet').removeClass('layui-hide');
                        form.render();
                 	}
            	 });
               }
        	});
 		form.on('submit(update)', function(data){

        	var paramTemplate = "";
       		//获取参数
           	var tempObj = {};
           	$.each($("form").find('input[fieldname][templateField="1"],textarea[fieldname][templateField="1"]'), function(){
           		var name = $(this).attr('fieldname');
           	    tempObj[name] = $(this).val();
           	});

            $.each($("form").find('input[type="radio"][templateField="2"]:checked'), function(){
                var name = $(this).attr('fieldname');
                tempObj[name] = $(this).val();
            });

           	paramTemplate = JSON.stringify(tempObj);

        	data.field.paramTemplate = paramTemplate;

            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/pay_interface_type/template/update', //模拟接口,
                data: data.field,
                error: function(err){layer.alert(err.msg,{title:"请求失败"})},
                success: function(res){
                    if(res.code == 0){
                        layer.alert(res.msg, {title: '保存成功'},function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        });
                    }
                }
            });
            return false;
        });
    })
</script>
